<template>
	<view>
		<view class="top">
			<view class="flexRow">
				<view class="">
					<view class="withdraw_text">
						可提现金额(元)
					</view>
					<view class="withdraw_num">
						{{userBalance}}
					</view>
				</view>
				<view class="withdraw_record">
					<navigator url="../amountList/amountList">提现记录</navigator>
				</view>
			</view>
		</view>
		<view class="bottom">
			提现说明：<br/>
			1.提现成功后，24小时内到账；<br/>
			2.如有疑问请联系在线客服；<br/>
			3.一旦发现任何违规行为，平台有权终止提现， 并对您出暂时或永久封号。
		</view>
		<view class="center">
			<view class="cneter_title">
				提现金额
			</view>
			<view class="withdraw_box flexRow">
				<view class="withdraw_left flexRow">
					<text class="withdraw_icon">￥</text>
					<input type="number" maxlength="6" v-model="withdraw_number" class="withdraw_input" />
				</view>
				<view class="withdraw_right" @tap="withdrawAll">
					全部提现
				</view>
			</view>
			<view class="withdraw_alert">
				最少提现1元
			</view>
			<view class="withdraw_btn" @tap="withdraw">
				提现
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../apiRequest/request.js'
	export default {
		data() {
			return {
				user: {},
				config: {},
				withdraw_number: ''
			}
		},
		computed:{
			userBalance: function(){
				return this.user.balance/this.config.integral_ratio || 0
			}
		},
		onShow() {
			this.user = uni.getStorageSync('user');
			this.config = uni.getStorageSync('config');
		},
		methods: {
			withdrawAll(){
				this.withdraw_number = this.userBalance
			},
			withdraw(){
				let that = this;
				if(this.withdraw_number == 0 || this.withdraw_number == ''){
					return
				}
				if(this.withdraw_number<=this.user.balance/this.config.integral_ratio){
					uni.showModal({
					    title: '',
					    content: '确认提现？',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定:'+that.withdraw_number*that.config.integral_ratio);
								request.outAmount(that.withdraw_number*that.config.integral_ratio).then(res=>{
									console.log(res)
									uni.showToast({
									    title: '已提交提现申请，请耐心等待',
										icon: 'none',
									    duration: 2000
									})
									request.userInfo(that).then(res=>{
										that.user = res.data.userInfo
										uni.setStorageSync('user', res.data.userInfo)
										uni.navigateTo({
											url: '/pages/amountList/amountList'
										})
									}).catch(err=>{
										that.$unexpected(err)
									})
								}).catch(err=>{
									that.$unexpected(err)
								})
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					
				}else{
					uni.showToast({
					    title: '请确认提现金额',
						icon: 'none',
					    duration: 2000
					});
				}
			}
		}
	}
</script>

<style>
page{
	background:rgba(248,248,248,1);
	position: relative;
}
.top{
	height:299rpx;
	background:rgba(4,137,255,1);
	border-top: 1rpx solid transparent;
}
.top>view{
	padding-left: 50rpx;
	padding-right: 60rpx;
	justify-content: space-between;
}
.withdraw_record{
	width:200rpx;
	height:60rpx;
	line-height: 60rpx;
	background:rgba(255,255,255,0.3);
	border-radius:30rpx;
	font-size:34rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	margin-top: 56rpx;
	text-align: center;
}
.withdraw_text{
	padding-top: 29rpx;
	font-size:30rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(255,255,255,1);
	line-height:30rpx;
	margin-bottom: 20rpx;
}
.withdraw_num{
	font-size:68rpx;
	font-family:Arial;
	font-weight:bold;
	color:rgba(255,255,255,1);
	line-height:68rpx;
}
.bottom{
	margin-top: 517rpx;
	width: 580rpx;
	padding-left: 18rpx;
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(186,186,186,1);
	line-height:40rpx;
}
.center{
	width:710rpx;
	min-height:557rpx;
	background:rgba(255,255,255,1);
	box-shadow:0 2rpx 14rpx 0 rgba(172,172,172,0.6);
	border-radius:10rpx;
	position: absolute;
	top: 180rpx;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	padding: 0 20rpx;
}
.cneter_title{
	font-size:34rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(51,51,51,1);
	line-height:34rpx;
	padding-top: 30rpx;
}
.withdraw_box{
	padding-top: 20rpx;
	justify-content: space-between;
	border-bottom: 2rpx solid rgba(238,238,238,1);
	align-items: center;
}
.withdraw_left{
	align-items: flex-end;
}
.withdraw_icon{
	padding-bottom: 20rpx;
	font-size:68rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(51,51,51,1);
	line-height:68rpx;
	margin-right: 50rpx;
}
.withdraw_input{
	width: 300rpx;
	height: 68rpx;
	font-size:68rpx;
	font-family:Arial;
	font-weight:bold;
	color:rgba(51,51,51,1);
	/* line-height:100rpx; */
}
.withdraw_right{
	vertical-align: bottom;
	font-size:32rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(4,137,255,1);
	line-height:32rpx;
}
.withdraw_alert{
	font-size:32rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(186,186,186,1);
	line-height:32rpx;
	margin-top: 40rpx;
	margin-bottom: 60rpx;
}
.withdraw_btn{
	width:600rpx;
	height:100rpx;
	background:linear-gradient(0deg,rgba(254,173,3,1),rgba(255,216,122,1));
	box-shadow:0 8rpx 20rpx 0 rgba(254,150,1,0.4);
	border-radius:10rpx;
	margin: 0 auto;
	text-align: center;
	line-height: 100rpx;
	font-size:38rpx;
	font-family:Source Han Sans SC;
	font-weight:500;
	color:rgba(255,255,255,1);
}
</style>
